<script setup lang="ts">
import { ref } from 'vue'
import MyTable from './components/MyTable.vue'

// 定义接口
export interface User {
  id: number
  cname: string
  age: number
}

const list = ref<User[]>([
  { id: 1, cname: '张小花', age: 18 },
  { id: 2, cname: '孙大明', age: 19 },
  { id: 3, cname: '刘德忠', age: 17 },
])

const list2 = ref<User[]>([
  { id: 1, cname: '赵小云', age: 18 },
  { id: 2, cname: '刘蓓蓓', age: 19 },
  { id: 3, cname: '姜肖泰', age: 17 },
])

const removeItem = (obj: User) => {
  console.log(obj)
  // 在父组件中删除
  list.value.splice(
    list.value.findIndex((item) => item.id == obj.id),
    1,
  )
}

const checkItem = (obj: User) => {
  alert(JSON.stringify(obj))
}
</script>

<template>
  <MyTable :data="list">
    <template #button="obj">
      <button @click="removeItem(obj)">删除</button>
    </template>
  </MyTable>
  <MyTable :data="list2">
    <template #button="obj">
      <button @click="checkItem(obj)">查看</button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
</style>
